<template>
  <div class="server">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="12" class="col-item">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>CPU</strong></span>
          </div>
          <ul>
            <li class="item">
              <el-row>
                <el-col :span="12"><strong>属性</strong></el-col>
                <el-col :span="12"><strong>值</strong></el-col>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="12">核心数</el-col>
                <el-col :span="12" v-text="data.cpu.cpuNum"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="12">用户使用率</el-col>
                <el-col :span="12" v-text="data.cpu.used+'%'"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="12">系统使用率</el-col>
                <el-col :span="12" v-text="data.cpu.sys+'%'"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="12">当前空闲率</el-col>
                <el-col :span="12" v-text="data.cpu.free+'%'"/>
              </el-row>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" class="col-item">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>内存</strong></span>
          </div>
          <ul>
            <li class="item">
              <el-row>
                <el-col :span="8"><strong>属性</strong></el-col>
                <el-col :span="8"><strong>内存</strong></el-col>
                <el-col :span="8"><strong>JVM</strong></el-col>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="8">总内存</el-col>
                <el-col :span="8" v-text="data.mem.total+'G'"/>
                <el-col :span="8" v-text="data.jvm.total+'M'"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="8">已用内存</el-col>
                <el-col :span="8" v-text="data.mem.used+'G'"/>
                <el-col :span="8" v-text="data.jvm.used+'M'"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="8">剩余内存</el-col>
                <el-col :span="8" v-text="data.mem.free+'G'"/>
                <el-col :span="8" v-text="data.jvm.free+'M'"/>
              </el-row>
            </li>
            <li class="item">
              <el-row>
                <el-col :span="8">使用率</el-col>
                <el-col :span="8" v-text="data.mem.usage+'%'"/>
                <el-col :span="8" v-text="data.jvm.usage+'%'"/>
              </el-row>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-card shadow="always">
        <div slot="header">
          <span><strong>服务器信息</strong></span>
        </div>
        <ul>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">服务器名称</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.computerName"/>
              <el-col :xs="12" :sm="12" :lg="6">操作系统</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.osName"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">服务器IP</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.computerIp"/>
              <el-col :xs="12" :sm="12" :lg="6">系统架构</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.osArch"/>
            </el-row>
          </li>
        </ul>
      </el-card>
    </el-row>
    <el-row class="row">
      <el-card shadow="always">
        <div slot="header">
          <span><strong>缓存信息</strong></span>
        </div>
        <ul>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">缓存类型</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.type"/>
              <el-col :xs="12" :sm="12" :lg="6">缓存IP地址</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.ip"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">缓存端口</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.port"/>
              <el-col :xs="12" :sm="12" :lg="6">缓存系统OS</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.os"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">版本</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.version"/>
              <el-col :xs="12" :sm="12" :lg="6">已经运行时间</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="formatTime(data.cache.uptimeInSeconds)"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">连接数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.connectedClients"/>
              <el-col :xs="12" :sm="12" :lg="6">运行模式</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.mode==='standalone'?'单机':'集群'"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">内存总数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="formatMem(data.cache.total)"/>
              <el-col :xs="12" :sm="12" :lg="6">已用内存</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="formatMem(data.cache.used)"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">cpu使用率</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="parseFloat(data.cache.usedCpu).toFixed(2)+'%'"/>
              <el-col :xs="12" :sm="12" :lg="6">Key数量</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.cache.dbSize"/>
            </el-row>
          </li>
        </ul>
      </el-card>
    </el-row>
    <el-row class="row">
      <el-card shadow="always">
        <div slot="header">
          <span><strong>Java虚拟机信息</strong></span>
        </div>
        <ul>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">Java名称</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.name"/>
              <el-col :xs="12" :sm="12" :lg="6">Java版本</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.version"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">启动时间</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.startTime"/>
              <el-col :xs="12" :sm="12" :lg="6">运行时长</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.runTime"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">安装路径</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.home"/>
              <el-col :xs="12" :sm="12" :lg="6">项目路径</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.userDir"/>
            </el-row>
          </li>
        </ul>
      </el-card>
    </el-row>
    <el-row class="row">
      <el-card shadow="always">
        <div slot="header">
          <span><strong>NGINX信息</strong></span>
        </div>
        <ul>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">前活动的连接数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="nginx.active"/>
              <el-col :xs="12" :sm="12" :lg="6">接受的连接数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="nginx.accepted"/>
            </el-row>
          </li>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="6">总握手数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="nginx.handled"/>
              <el-col :xs="12" :sm="12" :lg="6">总请求数</el-col>
              <el-col :xs="12" :sm="12" :lg="6" v-text="nginx.requests"/>
            </el-row>
          </li>
        </ul>
      </el-card>
    </el-row>

    <el-row class="row">
      <el-card shadow="always">
        <div slot="header">
          <span><strong>磁盘状态</strong></span>
        </div>
        <ul>
          <li class="item">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="5"><strong>盘符路径</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="3"><strong>文件系统</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="4"><strong>盘符类型</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="3"><strong>总大小</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="3"><strong>可用大小</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="3"><strong>已用大小</strong></el-col>
              <el-col :xs="12" :sm="12" :lg="3"><strong>使用百分比</strong></el-col>
            </el-row>
          </li>

          <li class="item" v-for="item in data.sysFiles" :key="item.dirName+item.sysTypeName">
            <el-row>
              <el-col :xs="12" :sm="12" :lg="5" v-text="item.dirName"/>
              <el-col :xs="12" :sm="12" :lg="3" v-text="item.sysTypeName?item.sysTypeName:'未知'"/>
              <el-col :xs="12" :sm="12" :lg="4" v-text="item.typeName"/>
              <el-col :xs="12" :sm="12" :lg="3" v-text="item.total"/>
              <el-col :xs="12" :sm="12" :lg="3" v-text="item.free"/>
              <el-col :xs="12" :sm="12" :lg="3" v-text="item.used"/>
              <el-col :xs="12" :sm="12" :lg="3" v-text="item.usage+'%'"/>
            </el-row>
          </li>
        </ul>
      </el-card>
    </el-row>
  </div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {getNginxInfo, getServerInfo} from '@/api/server';
import {changeMem, formatSeconds} from '@/utils';
import axios from "axios";
import {NginxStatus, parseNginxStatus} from "@/utils/nginxParse";
import {Loading} from "element-ui";

@Component
export default class Server extends Vue {
  data: any = {
    cpu: {
      cpuNum: 0,
      total: 0,
      sys: 0,
      used: 0,
      wait: 0,
      free: 0
    },
    mem: {
      total: 0,
      used: 0,
      free: 0,
      usage: 0
    },
    jvm: {
      total: 0,
      max: 0,
      free: 0,
      version: '',
      home: '',
      name: '',
      used: 0,
      startTime: '',
      usage: 0,
      runTime: ''
    },
    sys: {
      computerName: '',
      computerIp: '',
      userDir: '',
      osName: '',
      osArch: ''
    },
    cache: {
      total: 0,
      used: 0,
      mode: '',
      type: '',
      version: '',
      os: '',
      ip: '',
      port: 0,
      uptimeInSeconds: 0,
      connectedClients: 0,
      usedCpu: 0.0,
      dbSize: 0,
    },
    sysFiles: []
  };

  nginx: NginxStatus = {
    active: 0,
    reading: 0,
    writing: 0,
    waiting: 0,
    accepted: 0,
    handled: 0,
    requests: 0
  }

  getData() {
    let loadingInstance = Loading.service({fullscreen: true, background: 'rgba(0, 0, 0, 0.7)'});
    axios.all([getNginxInfo(), getServerInfo()]).then(axios.spread((nginxInfo, serverInfo) => {
      this.data = serverInfo.data;
      this.nginx = parseNginxStatus(nginxInfo.data)
    })).catch((e) => {
      console.error(e);
    }).finally(() => {
      loadingInstance?.close();
    })
  }

  formatMem(limit) {
    return changeMem(limit);
  }

  formatTime(seconds) {
    return formatSeconds(seconds)
  }

  mounted() {
    this.getData();
  }
}
</script>

<style scoped lang="scss">
.server {


  .col-item {
    margin-bottom: 20px;
  }

  .row {
    margin-bottom: 20px;
  }


  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .item {
    color: #606266;
    font-size: 14px;
    padding: 7px 10px;
    border-bottom: 1px solid rgb(231, 234, 236);
  }
}
</style>

